<template>
  <div class="shop-car">
    <shop-head :title="title"></shop-head>
    <div class="user-shop-car">
    <div class="title">
      <h5>您的订单</h5>
      <p><span></span><span class="title-film-name">电影名称</span><span class="title-film-number">购票数量</span><span class="title-film-operate">操作</span><span class="select-all"><input type="checkbox" :checked="selectAll" @click="selecta" @change="selectAll = $event.target.checked"></span></p>
    </div>
      <ul class="film-car-list">
        <li v-for="(item, index) in userFilms" :key="index">
          <img :src="item.poster" :alt="item.name" :title="item.name">
          <p>
            <span class="film-name">{{item.name}}</span>
            <span class="film-number">{{item.number}}</span>
            <span class="film-operate"><button @click = "downFilm(item)">-</button><input type="number" :value="item.number" @change = "inputFilm(item, $event.target.value)"><button @click = "upFilm(item)">+</button></span>
            <span class="film-select"><input type="checkbox" @click="isSelect(index, $event.target.checked)" :checked="select[index].select"></span>
          </p>
        </li>
      </ul>
      <div class="all">
        <div class="allnum">您购买的商品总量为: {{getCount}}</div><div class="pay">确认支付</div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import {mapState, mapMutations} from 'vuex'
import shopHead from '../head'
export default {
  name: 'shopCar',
  data () {
    return {
      title: '购物车',
      selectAll: false,
      select: []
    }
  },
  created () {
    // 在组件创建的时候获取购物车长度
    console.log(this.userFilms.length)
    for (var i = 0; i < this.userFilms.length; i++) {
      this.select.push({index: i, select: false})
    }
    console.log(this.select)
  },
  computed: {
    ...mapState([
      'userFilms'
    ]),
    getCount () {
      var num = 0
      this.userFilms.forEach(item => {
        num += item.number
      })
      return num
    }
  },
  methods: {
    ...mapMutations([
      'addFilm',
      'changeFilm'
    ]),
    selecta () {
      console.log(this.selectAll)
      if (!this.selectAll) {
        this.select.forEach(item => {
          Vue.set(item, item['select'], true)
        })
        console.log(this.selectAll)
      }
    },
    isSelect (str, flag) {

    },
    /**
     * 减少购物车中的电影的数量
     * params {Object} item 传递一个电影信息的对象
     */
    downFilm (item) {
      var obj = Object.assign({}, item, {number: -1})
      this.addFilm(obj)
    },
    /**
     * 用户在input框中直接输入值来改变我们电影的数量
     * params {Object} item 传递一个电影对象
     * params {String || Number}  num 传递我们输入的电影票的数量
     */
    inputFilm (item, num) {
      var obj = Object.assign({}, item, { number: num })
      this.changeFilm(obj)
    },
    /**
     * 添加电影
     * params {Object} item 传递我们的电影信息的对象
     */
    upFilm (item) {
      var obj = Object.assign({}, item, {number: 1})
      console.log(obj)
      this.addFilm(obj)
    }
  },
  components: {
    shopHead
  }
}
</script>

<style lang="scss">
@import '@/styles/common/px2rem.scss';
.shop-car{
  display: flex;
  flex-direction: column;
  height: 100%;
  .user-shop-car{
    flex: 1;
    font-size: px2rem(16);
    padding: px2rem(20) px2rem(10);
    display: flex;
    flex-direction: column;
    .title{
      p{
        display: flex;
      }
      border-bottom: 2px solid #333;
      .title-film-name{
        margin-left: px2rem(60);
        display: inline-block;
        width: px2rem(100);
      }
      .title-film-number{
        margin-left: px2rem(10);
      }
      .title-film-operate{
        margin-left: px2rem(40);
      }
      .select-all{
        display: flex;
        width: px2rem(15);
        height: px2rem(15);
        align-self: center;
        margin-left: px2rem(15);
        input{
          width: 100%;
          height: 100%;
        }
      }
    }
    .film-car-list{
      flex: 1;
      overflow-y: auto;
    }
    li{
      display: flex;
      padding: px2rem(20) 0;
      border-bottom: 1px solid #ccc;
      img{
        width: px2rem(50);
        height: px2rem(70);
      }
      p{
        align-self: center;
        display: flex;
        .film-name{
          display: inline-block;
          margin-left: px2rem(10);
          width: px2rem(100);
        }
        .film-number{
          display: inline-block;
          margin-left: px2rem(10);
          width: px2rem(70);
        }
        .film-operate{
          input{
            width: px2rem(18);
            height: px2rem(18);
            border: 1px solid #ccc;
            font-size: px2rem(16)
          }
          button{
            width: px2rem(20);
            height: px2rem(20);
            padding: 0;
            border: none;
            font-size: px2rem(20);
          }
        }
        .film-select{
          display: flex;
          width: px2rem(15);
          height: px2rem(15);
          align-self: center;
          margin-left: px2rem(15);
          input{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
.allnum {
  background-color: #f69d89;
}
.all{
  display: flex;
  height: px2rem(30);
  line-height: px2rem(30);
  justify-content: space-between;
  .pay{
    width: px2rem(80);
    background-color: #f54a54;
    text-align: center;
    color: #fff;
  }
}
</style>
